<!DOCTYPE html>
<html>
<head>
<title> 头像编辑 - wayixia.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 使用QLib控件是必须包含样式表 -->
<link type="text/css" rel="stylesheet" href="{$app:qlib/}/ui.css" />
<link type="text/css" rel="stylesheet" href="{$themes:path/}/test.css" />
<link type="text/css" rel="stylesheet" href="{$themes:path/}/style.css" />
<link type="text/css" rel="stylesheet" href="{$themes:path/}/waterfall.css" />
<link type="text/css" rel="stylesheet" href="{$themes:path/}/registeruser.css">
<link type="text/css" rel="stylesheet" href="{$themes:path/}/user.css">
<style>
<!--


.avatar_preview {
  border:1px solid #CCC;
  overflow:hidden;
  position: relative;
}

#preview_128 {
  width: 92px;
  height: 92px;
  position: relative;
}

#preview_48 {
  width: 48px;
  height: 48px;
}

#preview_128 img, #preview_48 img {
  position: absolute;
  left:0;
  top:0;
}


#image_area {
  margin-left: 20px;
  margin-top: 10px;
  width: 500px;
  height: 400px;
  cursor: default;
}

.avatar_area {
  position: relative;
  overflow: hidden;
  cursor: default;
}

.avatar_area .avatar_image {
  position: absolute;
  left: 0px;;
  top: 0px;
  cursor: default;
}

.avatar_area .avatar_mask {
  left:0;
  top:0;
  width: 500px;
  height: 400px;
  position: absolute;
  border:0px solid #000;
  background: #000;
  opacity: 0.6;
  cursor: default;
}

.avatar_area #select_area {
  position: absolute;
  background: transparent;
  overflow:hidden;
  cursor: default;
}

.avatar_area #select_area_image {
  position:absolute;
  cursor: default;
  background: red;
}

.avatar_area #thumb {
  width:100%;
  height:100%;
  background: #FFF;
}

.avatar_area #select_tracer {
  position:absolute;
  left: 4px;
  top: 4px;
  right: 4px;
  bottom: 4px;
  border: 1px #FFF dotted;
  overflow:hidden;
}

.avatar_area #select_tracer_btn {
  position:absolute;
  left: 4px;
  top: 4px;
  right: 4px;
  bottom: 4px;
  cursor: move;
}

#avatar_zoom_out {
  margin-top: 20px;
  margin-left: 20px;
}

.jcrop-handle{background-color:#333;border:1px #EEE solid;font-size:1px;height:7px;width:7px;}
.jcrop-handle.ord-n{left:50%;margin-left:-4px;margin-top:-4px;top:0;}
.jcrop-handle.ord-s{bottom:0;left:50%;margin-bottom:-4px;margin-left:-4px;}
.jcrop-handle.ord-e{margin-right:-4px;margin-top:-4px;right:0;top:50%;}
.jcrop-handle.ord-w{left:0;margin-left:-4px;margin-top:-4px;top:50%;}
.jcrop-handle.ord-nw{left:0;margin-left:-4px;margin-top:-4px;top:0;}
.jcrop-handle.ord-ne{margin-right:-4px;margin-top:-4px;right:0;top:0;}
.jcrop-handle.ord-se{bottom:0;margin-bottom:-4px;margin-right:-4px;right:0;}
.jcrop-handle.ord-sw{bottom:0;left:0;margin-bottom:-4px;margin-left:-4px;}

.jcrop-dragbar.ord-n,.jcrop-dragbar.ord-s{height:7px;width:100%;}
.jcrop-dragbar.ord-e,.jcrop-dragbar.ord-w{height:100%;width:7px;}
.jcrop-dragbar.ord-n{margin-top:-4px;}
.jcrop-dragbar.ord-s{bottom:0;margin-bottom:-4px;}
.jcrop-dragbar.ord-e{margin-right:-4px;right:0;}
.jcrop-dragbar.ord-w{margin-left:-4px;}


-->
</style>

<script src="{$app:qlib}/Q.js">
<!--
import utils.tween;
import utils.stl;
import utils.json2;
import utils.ajax;
import utils.xml;
-->
</script>

<script type="text/javascript">
<!--
var orginal_left = 0;
var orginal_top  = 0;
var orginal_width = 0;
var orginal_height = 0;
var zoom = 0.0;
var select_start_x = 0;
var select_start_y = 0;
var image_url = null;

var g_image_selector = null;

var axis_x  = 0;
var axis_y  = 0;

// 生成指定len长度的随机字符串
function RoundStr(len) {
	var str = '';
	var roundArray = 'abcdef1234567890'.split('');
	for(var i=0; i < len; i++) {
		str += '' + roundArray[Math.round( Math.random()* (roundArray.length - 1))];
	}
	return str;
}

function loadimage(url) {
  image_url = url;
  url = url+'?'+RoundStr(9);
  //alert(url);
  Q.$('avatar').src = url;
  Q.$('select_area_image').src = url;
  Q.$('preview_128_image').src = url;
  Q.$('preview_48_image').src = url;
}

function check_error(img) {
  if(!img.is) {
    img.src = '{$themes:path}/icon48.png';
  }
  img.is = true;
}

// handle event listen
var BindHandler = function(object, func) {
	return function() {
		return func.apply(object, arguments);
	};
};
 
var BindAsEventHandler = function(object, func) {
	return function(event) {
		return func.call(object, (event || window.event));
	};
};

Q.ImageSelector = Q.KLASS();
Q.ImageSelector.prototype = {

hwnd : null,
hwnd_position : null,
avatar_image_left : 0,
avatar_image_top : 0,
background_image : null,
hwnd_mask: null,
thumb : null,
background_image_v : null,

_select_move : null,
_select_stop : null,

_resize_move : null,
_resize_stop : null,
padding_x : 4,
padding_y : 4,
d: 7,
l: null,
t: null,
r: null,
b: null,
ex: null,
ey: null,
cur: null,
select_div:null,

// entry
_initialize: function(config) {
  var _this = this;
  _this.hwnd = Q.$(config.render);
  _this.thumb = Q.$(config.thumb);
  _this.select_div = Q.$('select_area');
  _this.background_image = Q.$('avatar');
  _this.avatar_image_left = parseInt(_this.background_image.currentStyle.left, 10);
  _this.avatar_image_top = parseInt(_this.background_image.currentStyle.top, 10);

  //事件对象(用于绑定移除事件)
  _this._select_move = BindAsEventHandler(_this, _this.select_move);
  _this._select_stop = BindAsEventHandler(_this, _this.select_stop);
  _this.select_div.style.display = 'block';
  Q.$('select_tracer_btn').style.visibility = 'visible';
  _this.move_select_area(100, 100, 200, 200);
  Q.addEvent(_this.thumb, "mousedown", BindAsEventHandler(_this, _this.select_start));
},

get_rect_of_main : function() {
  return {left: 0, top: 0, width: orginal_width, height: orginal_height};
},

get_rect_of_select : function() {
  var _this = this;
  var c=_this.select_div.currentStyle;
  var current_style_left = parseInt(c.left, 10);
  var current_style_top  = parseInt(c.top, 10);

  // current rect
  var scale_select_left = current_style_left+_this.padding_x-_this.avatar_image_left;
  var scale_select_top= current_style_top+_this.padding_y-_this.avatar_image_top; 
  var scale_select_width= parseInt(c.width,  10)-2*_this.padding_x;
  var scale_select_height= parseInt(c.height, 10)-2*_this.padding_y;

  var scale_image_left = 0;
  var scale_image_top = 0;
  var scale_image_width = _this.background_image.offsetWidth;
  var scale_image_height = _this.background_image.offsetHeight;

  var orignal_rect = _this.get_rect_of_main();
  var m = orignal_rect.width/scale_image_width;

  var left = scale_select_left*m;
  var top = scale_select_top*m;
  var width = scale_select_width*m;
  var height = scale_select_height*m;

  return {left: left, top: top, width:width, height: height};
/*
  var main_rect = _this.get_rect_of_main();

  var pos = Q.absPosition(_this.hwnd);
  var c2 = _this.background_image.currentStyle;
  var width2 = parseInt(c2.width, 10);
  if(c2.width < pos.width) {
    width2 = pos.width;
  }

  var height2 = parseInt(c.height, 10);
  if(height2 < pos.height) {
    height2 = pos.height;
  }

  var dest_left = left*main_rect.width/width2;
  var dest_top = top*main_rect.height/height2;
  var dest_width = parseInt(width*main_rect.width/width2, 10);
  var dest_height = parseInt(height*main_rect.height/height2, 10);

  return {left: dest_left, top: dest_top, width:dest_width, height: dest_height};
  */
},

// 移动选区
move_select_area : function(l, t, r, b) {
  var _this = this;
  _this.select_div.style.left = (l) + 'px';
  _this.select_div.style.top = (t) + 'px';
  _this.select_div.style.width = (r-l) + 'px';
  _this.select_div.style.height = (b-t) + 'px';
  Q.$('select_area_image').style.left = (-(l+_this.padding_x)+_this.avatar_image_left)+'px';
  Q.$('select_area_image').style.top = (-(t+_this.padding_y)+_this.avatar_image_top)+'px';
  _this.on_move_select_area(
    'preview_128_image', 92, 92,
    l+_this.padding_x, 
    t+_this.padding_y, 
    r-_this.padding_x, 
    b-_this.padding_y
  );

  _this.on_move_select_area(
    'preview_48_image', 48, 48,
    l+_this.padding_x, 
    t+_this.padding_y, 
    r-_this.padding_x, 
    b-_this.padding_y
  );
},

update_select_area : function() {
  var _this = this;
  var c=_this.select_div.currentStyle;
  var current_style_left = parseInt(c.left, 10);
  var current_style_top  = parseInt(c.top, 10);
  _this.move_select_area(
    current_style_left, 
    current_style_top, 
    current_style_left+parseInt(c.width,  10),
    current_style_top+parseInt(c.height, 10)
  );
},

on_move_select_area : function(tname, target_width, target_height, l, t, r, b) {
  var _this = this;
  var src_image_width = _this.background_image.offsetWidth;
  var src_image_height = _this.background_image.offsetHeight;
  var target_image_width = target_width*src_image_width/(parseFloat(r-l));
  var target_image_height = target_height*src_image_height/(parseFloat(b-t));

  var x = 0, y = 0; // 待计算结果
  x = -(l-_this.avatar_image_left)*target_image_width/src_image_width;
  y = -(t-_this.avatar_image_top)*target_image_height/src_image_height;

  //Q.printf("x="+x+"; y="+y+"; width="+target_image_width+"; height="+target_image_height );
  
  Q.$(tname).style.left = x + 'px';
  Q.$(tname).style.top = y + 'px';
  Q.$(tname).style.width = target_image_width+'px';
  Q.$(tname).style.height = target_image_height+'px';
},

move_image_bystep : function(dx, dy) {
  var _this = this;
  var mask_width = _this.hwnd.offsetWidth;
  var mask_height = _this.hwnd.offsetHeight;

  // x
  if(dx != 0) {
    var current_left = parseInt(_this.background_image.currentStyle.left, 10);
    var current_width = parseInt(_this.background_image.currentStyle.width, 10);
    var left = current_left;
    // can overflow
    if(mask_width < current_width) {
      if(current_left+dx > 0) {
        left = 0;
      } else if(current_left+dx < (mask_width - current_width)) {
        left = mask_width - current_width;
      } else {
        left = current_left+dx;
      }

      _this.avatar_image_left = left;
      _this.background_image.style.left = left + 'px';
      var vimage_current_left = parseInt(Q.$('select_area_image').currentStyle.left, 10);
      Q.$('select_area_image').style.left = 
          vimage_current_left+(left-current_left)+'px';
    }
  }

  // y
  if(dy != 0) {
    var current_top = parseInt(_this.background_image.currentStyle.top, 10);
    var current_height = parseInt(_this.background_image.currentStyle.height, 10);
    var top = current_top;
    if(mask_height < current_height) {
      if(current_top+dy > 0) {
        top = 0;
      } else if(current_top+dy < (mask_height - current_height)) {
        top = mask_height - current_height; 
      } else {
        top = current_top+dy;
      }
      _this.avatar_image_top = top; 
      _this.background_image.style.top = top + 'px';
      var vimage_current_top = parseInt(Q.$('select_area_image').currentStyle.top, 10);
      Q.$('select_area_image').style.top = 
          vimage_current_top+(top-current_top)+'px';
    }
  }

  _this.update_select_area();
},

reset_image_position : function() {
  var _this = this;
  var current_left = parseInt(_this.background_image.currentStyle.left, 10);
  var current_top = parseInt(_this.background_image.currentStyle.top, 10);

  _this.avatar_image_left = 0;
  _this.background_image.style.left = 0 + 'px';
  var vimage_current_left = parseInt(Q.$('select_area_image').currentStyle.left, 10);
  Q.$('select_area_image').style.left = vimage_current_left+(0-current_left)+'px';

  _this.avatar_image_top = 0; 
  _this.background_image.style.top = 0 + 'px';
  var vimage_current_top = parseInt(Q.$('select_area_image').currentStyle.top, 10);
  Q.$('select_area_image').style.top = vimage_current_top+(0-current_top)+'px';

  _this.update_select_area();
},

select_start : function(evt) {
  var _this = this;
  var element = evt.srcElement || evt.target;
  var current_style = element.currentStyle;
  _this.cur = current_style.cursor;

  var scroll = Q.scrollInfo();
  var pos = Q.absPosition(this.hwnd);
  _this.hwnd_position = {
    left: pos.left-scroll.l, 
    top: pos.top-scroll.t,
    right: pos.left-scroll.l+pos.width,
    bottom: pos.top-scroll.t+pos.height,
  };

  var c=_this.select_div.currentStyle;
  var current_style_left = parseInt(c.left, 10);
  var current_style_top  = parseInt(c.top, 10);
  _this.l=current_style_left;
  _this.t=current_style_top;
  _this.r=_this.l+parseInt(c.width,  10);
  _this.b=_this.t+parseInt(c.height, 10);

  if(_this.cur == 'move') {
    //Q.printf("start yes "+ _this.cur);
    this.x = evt.clientX;
    this.y = evt.clientY;
  } else {
    var x = evt.offsetX==undefined?evt.layerX:evt.offsetX;
    var y = evt.offsetY==undefined?evt.layerY:evt.offsetY;
    _this.ex=evt.screenX;
    _this.ey=evt.screenY;
    //Q.printf("start no "+ _this.cur);
  }

  this._isDragable = true;
  //mousemove时移动 mouseup时停止
  Q.addEvent(document, "mousemove", this._select_move);
  Q.addEvent(document, "mouseup", this._select_stop);
  if(document.all){
    //焦点丢失
    Q.addEvent(this.thumb, "losecapture", this._select_stop);
    //设置鼠标捕获
    this.thumb.setCapture();
  } else {
    //焦点丢失
    Q.addEvent(window, "blur", this._select_stop);
    //阻止默认动作
    evt.preventDefault();
  }

  if (evt.stopPropagation) {
      evt.stopPropagation();//在基于firefox内核的浏览器中支持做法stopPropagation
  } else {
      evt.cancelBubble = true;//基于ie的写法
  }
},

select_move : function(evt) {
  var _this = this;
  element = evt.srcElement || evt.target;
  if(this._isDragable ) {
    if(_this.cur == 'move') {
      var dx = evt.clientX - this.x;
      var dy = evt.clientY - this.y;
      var width = _this.r-_this.l;
      var height = _this.b - _this.t;
      var full_rect_width = _this.hwnd_position.right-_this.hwnd_position.left;
      var full_rect_height = _this.hwnd_position.bottom-_this.hwnd_position.top;

      var left = 0;
      if(_this.l+dx < -_this.padding_x) {
        left = -_this.padding_x;
      } else if(_this.l+dx+width > full_rect_width+_this.padding_x) {
        left = full_rect_width+_this.padding_x-width;
      } else {
        left = _this.l+dx;
      }

      var top = 0;
      if(_this.t+dy < -_this.padding_y) {
        top = -_this.padding_y;
      } else if(_this.t+dy+height > full_rect_height+_this.padding_y) {
        top = full_rect_height + _this.padding_y - height;
      } else {
        top = _this.t+dy;
      }
      _this.move_select_area(left, top, left+width, top+height);
    } else {
      var left = 0, top  = 0, right = 0, bottom = 0;
      var cursor = _this.cur.substring(0,2);
      var dx=evt.screenX-_this.ex;
      var dy=evt.screenY-_this.ey;
      var b_w = (cursor.indexOf('w')>-1);
      var b_e = (cursor.indexOf('e')>-1);
      var b_n = (cursor.indexOf('n')>-1);
      var b_s = (cursor.indexOf('s')>-1);
      var full_rect_width = _this.hwnd_position.right - _this.hwnd_position.left;
      var full_rect_height = _this.hwnd_position.bottom - _this.hwnd_position.top;

      if(b_w) _this.l+=dx;
      else if(b_e) _this.r+=dx;
      if(b_n) _this.t+=dy;
      else if(b_s) _this.b+=dy;

      if((!b_w && b_s) || (!b_n&&b_e) || (b_s&&b_e)) {
        // top left fixed
        left = _this.l;
        top = _this.t;
        var max_value = full_rect_height - _this.t;
        if(full_rect_width - _this.l < full_rect_height - _this.t) {
          max_value = full_rect_width - _this.l;
        }
        
        if((!b_w && b_s)) {
          if(_this.b-_this.t > max_value) {
            bottom = _this.t + max_value + _this.padding_y;
          } else {
            bottom = _this.b;
          }
          right = left + bottom-top;
        } else {
          if(_this.r-_this.l > max_value) {
            right = _this.l + max_value + _this.padding_x;
          } else {
            right = _this.r;
          }
          bottom = top + right-left;
        }
      } else if((!b_n&&b_w) || (b_w && b_s)) {
        // top right fixed
        top = _this.t;
        right  = _this.r;
        var max_value = full_rect_height - _this.t;
        if(_this.r < full_rect_height - _this.t) {
          max_value = _this.r;
        }

        if(_this.r-_this.l > max_value) {
          left = _this.r - max_value - _this.padding_x;
        } else {
          left = _this.l;
        }
        bottom = top + right-left;
      } else if((b_w&&b_n)){
        // bottom right fixed
        bottom = _this.b;
        right = _this.r;
        var max_value = _this.b;
        if(_this.r < _this.b) {
          max_value = _this.r;
        }

        if(_this.r-_this.l > max_value) {
          left = _this.r - max_value - _this.padding_x;
        } else {
          left = _this.l;
        }
        top = bottom - (right-left);
      } else if((b_n && !b_w) || (b_n && b_e) ) {
        // bottom left fixed
        left = _this.l;
        bottom = _this.b;
        var max_value = _this.b;
        if(full_rect_width - _this.l < _this.b) {
          max_value = full_rect_width - _this.l;
        }

        if((b_n && !b_w))  {
          if(_this.b-_this.t > max_value) {
            top = _this.b - max_value - _this.padding_y;
          } else {
            top = _this.t;
          }
          right = left + bottom-top;
        }
      }
      _this.ex+=dx;
      _this.ey+=dy;

      var need_update_x = (right-left > 100);
      var need_update_y = (bottom-top > 100);
      if(need_update_x || need_update_y) {
        var tleft, ttop, tright, tbottom;
        if(!need_update_x) {
          tleft = _this.l;
          tright = _this.r;
        } else {
          tleft = left;
          tright = right;
        }

        if(!need_update_y) {
          ttop = _this.t;
          tbottom = _this.b;
        } else {
          ttop = top;
          tbottom = bottom;
        }
        _this.move_select_area(tleft, ttop, tright, tbottom);
      }
    }
  }
},

select_stop : function(evt) {
    //移除事件
    Q.removeEvent(document, "mousemove", this._select_move);
    Q.removeEvent(document, "mouseup", this._select_stop);
    if(document.all){
      Q.removeEvent(this.thumb, "losecapture", this._select_stop);
      this.thumb.releaseCapture();
    }else{
      Q.removeEvent(window, "blur", this._select_stop);
    }
    this._isDragable  = false;
},

}

/*
function intersectRect(r1, r2) {
  return !(r2.left > r1.right || 
           r2.right < r1.left || 
           r2.top > r1.bottom ||
           r2.bottom < r1.top);
}
*/

function IntersectRect(prcSrcA, prcSrcB)
{
  var prcDst = {};
  prcDst.left = Math.max(prcSrcA.left, prcSrcB.left);
  prcDst.right = Math.min(prcSrcA.right, prcSrcB.right);
  prcDst.top = Math.max(prcSrcA.top, prcSrcB.top);
  prcDst.bottom = Math.min(prcSrcA.bottom, prcSrcB.bottom);
  if (prcDst.left > prcDst.right || prcDst.top > prcDst.bottom)
  {
    return {left:0, top:0, right:0, bottom:0};
  }
  return prcDst;
}

function ajax_save_avatar() {

  var a = g_image_selector.get_rect_of_main();
  var b = g_image_selector.get_rect_of_select();
  
  var a1 = {left: a.left, top: a.top, right: a.left+a.width, bottom: a.top+a.height};
  var a2 = {left: b.left, top: b.top, right: b.left+b.width, bottom: b.top+b.height};
  //var a3 = {left: 0, top: 0, right: orginal_width, bottom: orginal_height};
  var c = IntersectRect(a1, a2);
  //alert(json_encode(a)+'\n'+json_encode(b));
  var url = image_url.replace(/\//g, '\\');
  var pos = url.lastIndexOf('\\');
  //return;
  Q.Ajax({
    command: '{$app:module}&action=do-save-avatar&inajax=true',
    data: {cliprect: c, selectrect: b, img: url.substring(pos+1)},
    oncomplete : function(xmlhttp) {
      try
      {
        var resp = eval('('+xmlhttp.responseText+')');
        if(resp.header == 0) {
          alert('ok:'+resp.data);
        } else {
          alert(resp.data);
        }
      } catch (e) {
        alert(xmlhttp.responseText);
      }
      Q.$('image_save').disabled=false;
    },
    onerror: function(xmlhttp) {
      Q.$('image_save').disabled=false;
    }
  });
}

Q.Ready(function(){

  // 开启debug
  Q.setdebug(Q.$('debug'));
  Q.debug(true);
  //Q.printf("deubg enable.")

  Q.$('upload_file').onclick = function() {
    //alert(Q.$('upload_iframe').contentWindow.click_upload);
    var w = Q.$('upload_iframe').contentWindow;
    var f = w.upload_click;
    if(typeof f == 'function') 
    {
      f();
    }
  }

  Q.$('image_save').onclick = function() {
    this.disabled = true;
    ajax_save_avatar();
  }

  g_image_selector = new Q.ImageSelector({
    render: 'image_area',
    thumb : 'select_tracer_btn',
  });

  Q.$('avatar').onload = function() {
    var img = this;
    orginal_width = this.width;
    orginal_height = this.height;
    //this.width = 500;

    g_image_selector.reset_image_position();

    // 放大
    Q.$('avatar_zoom_in').onclick = function(){
      //alert(orginal_width);
      if(zoom >= 1.0) {
        return;
      }
      zoom = zoom+0.1;
      img.style.width = (orginal_width*(1+zoom))+'px';
      Q.$('select_area_image').style.width = (orginal_width*(1+zoom))+'px';
      g_image_selector.update_select_area();
    }

    // 缩小
    Q.$('avatar_zoom_out').onclick = function(){
      if(zoom <= 0.0) {
        return;
      }
      zoom = zoom-0.1;
      img.style.width = (orginal_width*(1+zoom))+'px';
      Q.$('select_area_image').style.width = (orginal_width*(1+zoom))+'px';
      g_image_selector.update_select_area();
    }

    // move left
    Q.$('avatar_move_left').onclick = function(){
      g_image_selector.move_image_bystep(-10, 0);
    }

    // move top
    Q.$('avatar_move_top').onclick = function(){
      g_image_selector.move_image_bystep(0, -10);
    }

    // move right
    Q.$('avatar_move_right').onclick = function(){
      g_image_selector.move_image_bystep(10, 0);
    }

    // move bottom
    Q.$('avatar_move_bottom').onclick = function(){
      g_image_selector.move_image_bystep(0, 10);
    }
  }

  loadimage('{$themes:path}/upload_avatar.png');

});


//-->
</script>
<body style="background:#f7f5f5;">

{#template user.menubar}

<div id="wrapper" class="skin01" style="margin-top: 40px;"> 
<div class="bground"> 
  <!--div id="head"> 
  {#template user.infoheader}
  </div--> 
  <div id="content">  
  <div id="cnthld" class="tieba" style="display: block;"> 
  <ul class="content-tab"> 
  <li class="beibao-tab">
    <a id="my-beibao" href="{$app:module}&action=home" class="tab-title songti tabbtn" hidefocus="">
    <span class="tab-title-tag">我的</span>画集
    </a>  
  </li>
  <li class="settings-tab">
    <a id="my-settings" href="{$app:module}&action=detail" class="tab-title songti tabbtn" hidefocus="">
      <span class="tab-title-tag">设置</span>资料
    </a>  
  </li>
  <li class="tieba-tab">
    <a id="my-settings" href="{$app:module}&action=avatar" class="tab-title songti tabbtn" hidefocus="">
      <span class="tab-title-tag">设置</span>头像
    </a>  
  </li>
  </ul> 
  <div class="cnthld-main clearfix">
  <div class="col leftside"> 
    <div class="loadingtpl">LOADING...</div> 
    <div class="plzhld" data-fill="tab_content">
      <div class="action-bar">
        <p>
          (* 提示：文件大小<=2M, 宽度>=200像素， 高度>=200像素, 仅支持bmp，jpeg，png，gif格式) 
        </p>
        <iframe id="upload_iframe" src="{$app:module}&action=avatar-upload-panel&callback=loadimage" width="0" height="0" style="width:0px; height:0;visibility:hidden;"></iframe>
        <div style="position:absolute; right:0; bottom:0; width:300px; height: 48px; line-height: 50px;text-align:right;margin-right: 15px;">
              <span id="upload_file" class="uploadBtn small">上传头像</span>
              <span id="image_save" class="uploadBtn small">保存头像</span>
            </div>
        </div>
      </div>
    <div class="regmain">
		<div class="right"  style="border:0px solid #CCC; background: #FFF;">
			<div id="preview_128" class="avatar_preview">
              <img id="preview_128_image" src="{$cfg:site.avatar}/{$fields:uid}128x128.jpg" 
                onerror="check_error(this);"/>
            </div>
            <span class="msg" id="msg-username"></span>
					<p> <br>
            <div id="preview_48" class="avatar_preview">
              <img id="preview_48_image" src="{$cfg:site.avatar}/{$fields:uid}48x48.jpg" 
                onerror="check_error(this);" style="position:absolute;"/>
            </div>
            <span class="msg" id="msg-username"></span>
          </p>
			</div>
      <div class="left" style="text-indent:20px; line-height:30px;">
        <p></p>
        <p>
          <div id="image_area" class="avatar_area">
            <img id="avatar" class="avatar_image"/>
            <div id="avatar_mask" class="avatar_mask">
              <div id="select_area">
                <div id="select_tracer">
                  <img id="select_area_image"/>
                </div>
                <div id="select_tracer_btn" style="display: block;" class="transparent_background">
                  <div style="cursor: n-resize; position: absolute; z-index: 370;" class="ord-n jcrop-dragbar"></div>
                  <div style="cursor: s-resize; position: absolute; z-index: 371;" class="ord-s jcrop-dragbar"></div>
                  <div style="cursor: e-resize; position: absolute; z-index: 372;" class="ord-e jcrop-dragbar"></div>
                  <div style="cursor: w-resize; position: absolute; z-index: 373;" class="ord-w jcrop-dragbar"></div>
                  <div style="cursor: n-resize; position: absolute; z-index: 374; opacity: 0.5;" class="ord-n jcrop-handle"></div>
                  <div style="cursor: s-resize; position: absolute; z-index: 375; opacity: 0.5;" class="ord-s jcrop-handle"></div>
                  <div style="cursor: e-resize; position: absolute; z-index: 376; opacity: 0.5;" class="ord-e jcrop-handle"></div>
                  <div style="cursor: w-resize; position: absolute; z-index: 377; opacity: 0.5;" class="ord-w jcrop-handle"></div>
                  <div style="cursor: nw-resize; position: absolute; z-index: 378; opacity: 0.5;" class="ord-nw jcrop-handle"></div>
                  <div style="cursor: ne-resize; position: absolute; z-index: 379; opacity: 0.5;" class="ord-ne jcrop-handle"></div>
                  <div style="cursor: se-resize; position: absolute; z-index: 380; opacity: 0.5;" class="ord-se jcrop-handle"></div>
                  <div style="cursor: sw-resize; position: absolute; z-index: 381; opacity: 0.5;" class="ord-sw jcrop-handle"></div>
                </div>
              </div>
              
            </div>
          </div>
          <button id="avatar_zoom_out">&nbsp;缩小&nbsp;</button>
          <button id="avatar_zoom_in">&nbsp;放大&nbsp;</button>
          <button id="avatar_move_left">&nbsp;左移&nbsp;</button>
          <button id="avatar_move_top">&nbsp;上移&nbsp;</button>
          <button id="avatar_move_right">&nbsp;右移&nbsp;</button>
          <button id="avatar_move_bottom">&nbsp;下移&nbsp;</button>
        </p>
        <p>
          <br/>
          <div id="debug" style="height: 100px; overflow-y:auto;"></div>
        </p>
			</div>
		</div>
	  </div>
	  <br><br><br><br>
	  </div>
	  <div class="leftside-shadow"></div> 
	</div> 

  </div>
  </div> 
  
  <div id="foot">
  <div class="mod-footer"> 
  <div class="bottom-line2"> <p>© WAYIXIA.COM <em class="s-bottom-copyright">&nbsp;&nbsp;&nbsp;&nbsp;</em></p> 
  </div>
  </div> 
  </div> 
  </div> 

  <a class="mod-go-top-btn" href="#" onclick="return false" style="display: none; position: fixed; bottom: 5px; right: 66.5px;"></a> </div>
</div>
</body>
</html>